<!--
 * @Author: [yuantongxin]
 * @Date: 2021-10-21 09:58:36
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-26 19:21:08
 * @Description: 
-->
<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <!-- 布局开始 -->
 <div>
      <el-row :gutter="20" style="margin-bottom:40px">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>访问量</span>
              </div>
              <div class="coo">
                <span class="big">25,848</span><br /> <br />日同比 12.5% 周同比 5%
                <el-divider></el-divider>
                <div class="left">总访问量</div>
                <div class="right">280万</div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>销售额</span>
              </div>
              <div class="coo">
                <span class="big">￥12,000</span><br />
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="70"
                  style="margin-top:10px"
                ></el-progress>
                <el-divider></el-divider>
                <div class="left">总销售额</div>
                <div class="right">80万</div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>订单量</span>
              </div>
              <div class="coo">
                <span class="big">25,848</span>
                <div ref="space"></div>
                <el-divider></el-divider>
                <div class="left">转化率</div>
                <div class="right">60%</div>
              </div>
            </el-card>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>用户</span>
              </div>
              <div class="coo">
                <span class="big">128位</span><br />
                <br />日同比 12.5% 周同比 5%<el-divider></el-divider>
                <div class="left">总用户</div>
                <div class="right">10800人</div>
              </div>
            </el-card>
          </div></el-col
        >
      </el-row>
    </div>

    <div>
      <el-row class="icon">
        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-user-solid" style="color:#69c0ff"></i> <br />
            用户
          </div></el-col
        >
        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-shopping-cart-1" style="color:#94de64"></i><br />产品
          </div></el-col
        >
        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-collection" style="color:#ff94c7"></i><br />标签
          </div></el-col
        >
        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-message" style="color:#ffd766"></i><br />消息
          </div></el-col
        >
        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-tickets" style="color:#b37eea"></i><br />票据
          </div></el-col
        >

        <el-col :span="4"
          ><div class="one">
            <i class="el-icon-s-order" style="color:#ff9c6e"></i><br />订单
          </div></el-col
        >
        <!-- <el-col :span="4"
          ><div class="one">
            <i class="el-icon-s-order"></i><br />订单 
            
            </div
        ></el-col>
         -->
      </el-row>
    </div>
    <!-- 布局结束 -->

    <div>
      <el-row :gutter="20" style="margin-top:40px">
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>订单趋势</span>
              </div>

              <div ref="root" style="width: 550px; height: 200px"></div>
            </el-card></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>平均评价</span>
              </div>
              <div ref="arg" style="width: 550px; height: 200px"></div>
            </el-card></div
        ></el-col>
      </el-row>
    </div>

    <!-- <div ref="root" style="width: 600px; height: 200px"></div> -->
   
    <!-- antv结束 -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import { Line } from "@antv/g2plot";
import { Column } from "@antv/g2plot";
import { Bar, TinyArea } from "@antv/g2plot";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    // 封装图标方法
    initChartsSpa() {
      let tinyArea = new TinyArea(this.$refs["space"], {
        data: [454, 417, 438, 887,485,586,895,855,485,659],
        height: 40,
        autoFit: false,
        smooth: true,
        areaStyle: {
          fill: "#bff2d8",
        },
      });
      tinyArea.render();
    },
    initChartsPro() {
      let bar = new Bar(this.$refs["arg"], {
        data: [
          { year: "90%", value: 90 },
          { year: "60%", value: 60 },
          { year: "30%", value: 30 },
          { year: "10%", value: 10 },
          { year: "0%", value: 0 },
        ],
        xField: "value",
        yField: "year",
        seriesField: "year",
        legend: {
          position: "top-left",
        },
      });
      bar.render();
    },
    initCharts() {
      let column = new Column(this.$refs["root"], {
        data: [
          {
            type: "1月",
            sales: 38,
          },
          {
            type: "2月",
            sales: 52,
          },
          {
            type: "3月",
            sales: 61,
          },
          {
            type: "4月",
            sales: 145,
          },
          {
            type: "5月",
            sales: 48,
          },
          {
            type: "6月",
            sales: 38,
          },
        ],
        xField: "type",
        yField: "sales",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: "#FFFFFF",
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "类别",
          },
          sales: {
            alias: "销售额",
          },
        },
      });
      column.render();
    },
  },
  // 在onMounted之后执行，页面dom节点创建完毕，并且挂载完毕
  mounted() {
    this.initCharts();
    this.initChartsPro();
    this.initChartsSpa();
  },
  // 页面dom节点创建完毕，但是没有挂载,获取不到dom
  // created(){}
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.icon {
  margin-bottom: 30px;
}

.one {
  text-align: center;
  padding-top: 10px;
  width: 90px;
  height: 90px;
  border-radius: 5px;
  box-shadow: 0 0 5px #999;
  color: #515a6e;
  // line-height: 90px;
  // background-color: #999;
}
.one i {
  font-size: 48px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.left {
  float: left;
  margin-bottom: 15px;
}

.right {
  float: right;
  margin-bottom: 15px;
}

.big {
  font-size: 48px;
}

.coo {
  color: #515a6e;
}
</style>
